/* 
 *  轮播图动画特效
 *  开发：Amron
 *  日期：12-30
 */
// 使用IIFE，可以减少全局变量的定义，避免污染全局变量
(function(){
    // 获取需要的元素
    var leftArrow = document.getElementById('leftArrow');
    var rightArrow = document.getElementById('rightArrow');
    var banner = document.getElementById('banner');
    var cycles = document.getElementById('cycles');
    var carousel = document.getElementById('carousel');
    var location = document.getElementById('location');
    var lis = banner.getElementsByTagName('li');

    // 创建需要的变量
    var number = 0;    // 轮播图的编号
    var timer;    // 定时器

    // 克隆一个假的第一张图
    var theLi = lis[0].cloneNode(true);
    banner.appendChild(theLi);

    // 左按钮事件绑定
    leftArrow.onclick = autoChange;
    // 自动轮播处理函数
    function autoChange(){

        // 函数节流判断
        if(lock) return;

        // 添加动画属性
        banner.style.transition = 'transform .3s ease 0s';

        // 每次图片编号加一
        number++;
        // 设置图片位移
        banner.style.transform = 'translateX('+ -16.666*number +'%)';
        // 判断到最后一张的时候，将图片瞬间移回第一张
        if(number == 5){
            // 在过渡动画结束之后直接移到第一个图片处
            setTimeout(function(){
                // 首先要去掉动画
                banner.style.transition = 'none';
                // 将位置归零
                banner.style.transform = 'translateX('+ 0 +'%)';
                // 并将图片编号重新赋值
                number = 0;
            },300)
        }

        // 调用小圆点样式函数
        cyclesChange();

        // 上锁
        lock = true;
        // 开锁
        setTimeout(function(){
            lock = false;
        },300)
    }

    // 右按钮事件绑定
    rightArrow.onclick = function(){

        // 函数节流判断
        if(lock) return;
        
        // 判断如果是第一张图片的话，要先瞬间移到最后，之后再进行过渡动画
        if(number == 0){
            // 首先要去掉动画
            banner.style.transition = 'none';
            // 移动图片到最后
            banner.style.transform = 'translateX('+ -16.666*5 +'%)';

            // 设置一个0ms的延时器，让浏览器再给banner加上动画
            setTimeout(function(){
                // 加上动画属性
                banner.style.transition = 'transform .3s ease 0s';
                // 进行过渡动画
                banner.style.transform = 'translateX('+ -16.666*4 +'%)';
            },0)

            // 设置图片编号
            number = 4;
        }else {
            // 每次图片编号要减一
            number--;
            // 进行过渡动画
            banner.style.transform = 'translateX('+ -16.666*number +'%)';
        }

        // 调用小圆点样式函数
        cyclesChange();

        // 上锁
        lock = true;
        // 开锁
        setTimeout(function(){
            lock = false;
        },300)
    }

    // 小圆点样式变化
    function cyclesChange(){
        // 获取所有小圆点元素
        var lis = cycles.children;
        // 遍历小圆点，进行样式修改
        for(var i = 0 ;i<lis.length;i++){
            // 找到当前图片的编号
            // 这里利用了一个取余运算来解决了number = 5的时候的异步问题
            if(lis[i].dataset.n == number%5 ) lis[i].className = 'current';
            else lis[i].className = '';
        }
    }

    // 小圆点点击事件利用事件委托
    cycles.onclick = function(e){

        // 函数节流判断
        if(lock) return;

        // 判断点击的是不是小圆点
        if(e.target.tagName.toLowerCase() == 'li'){
            // 要让编号等于点击的小圆点
            number = Number(e.target.dataset.n);
            // 添加动画属性
            banner.style.transition = 'transform .3s ease 0s';
            // 进行过渡动画
            banner.style.transform = 'translateX('+ -16.666*number +'%)'; 
            // 调用小圆点样式函数
            cyclesChange();
        }

        // 上锁
        lock = true;
        // 开锁
        setTimeout(function(){
            lock = false;
        },300)
    }

    // 添加自动轮播功能
    timer = setInterval(autoChange,2000);

    // 当我们鼠标移上去的时候，要停止自动轮播
    carousel.onmouseover = function(){
        //鼠标移动到上面的时候，将定时器关闭
        clearInterval(timer);
    }
    // 当我们鼠标移开的时候，继续自动轮播
    carousel.onmouseleave = function(){
        // 设表先关
        clearInterval(timer);
        timer = setInterval(autoChange,2000);
    }
    // 当我们鼠标停在列表上的时候，不影响自动轮播
    location.onmouseover = function(e){
        // 切断事件的传播
        e.stopPropagation();
    }
    location.onmouseenter = function(){
        // 设表先关
        clearInterval(timer);
        timer = setInterval(autoChange,2000);
    }

})();